<template>
  <!-- 规则草图编辑页面 -->
  <div class="ruleSketch">
    <!-- 标题 -->
    <div class="title">
      <ul>
        <li class="act">规则草图编辑</li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="con">
        <!-- 检索表单 -->
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item style="width: 120px">
            <el-select v-model="form.lxId" placeholder="类型" @change="selectChange" clearable>
              <el-option label="jpg" value="jpg"></el-option>
              <el-option label="png" value="png"></el-option>
              <el-option label="Xml" value="xml"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width: 120px">
            <el-select v-model="form.jbId" placeholder="级别" @change="selectChange2" clearable>
              <el-option label="一级" value="yiji"></el-option>
              <el-option label="二级" value="erji"></el-option>
              <el-option label="三级" value="sanji"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="form.inputVal" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" style="background-color: #4271c4; color: #fff; font-size: 20px" icon="el-icon-search"
              @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item style="width: calc(100% - 620px);text-align:right">
            <el-button size="small" style="background-color: #4271c4; color: #fff; font-size: 20px" icon="el-icon-search"
              @click="handleClick('', '4')">新增</el-button>
            <el-button size="small" style="background-color: #4271c4; color: #fff; font-size: 20px" icon="el-icon-search"
              @click="$message('批量删除成功')">批量删除</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格内容 -->
        <el-table height="75vh" :data="tableData" style="width: 100%" ref="multipleTable"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"> </span>
            </template>

          </el-table-column>
          <el-table-column prop="fileName" label="文件名称"> </el-table-column>
          <el-table-column prop="mblx" label="模板类型"> </el-table-column>
          <el-table-column prop="jb" label="级别"> </el-table-column>
          <el-table-column prop="sx" label="属性"> </el-table-column>
          <el-table-column prop="static" label="状态">
            <template slot-scope="scope">
              <span style="color:#FF2819" v-if="scope.row.static == 1">未识别</span>
              <span style="color:#08ABB5" v-else-if="scope.row.static == 2">已识别</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间"> </el-table-column>
          <el-table-column prop="dec" label="描述"> </el-table-column>
          <el-table-column prop="dec" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, '1')" type="text" size="small"
                style="text-decoration:underline">详情</el-button>
              <el-button @click="handleClick(scope.row, '2')" type="text" size="small"
                style="text-decoration:underline">修改</el-button>
              <el-button @click="handleClick(scope.row, '3')" type="text" size="small"
                style="color:red;text-decoration:underline">删除</el-button>
              <el-button @click="handleClick(scope.row, '5')" type="text" size="small"
                style="text-decoration:underline">识别</el-button>
              <!-- 详情页弹窗 -->
              <!-- 弹窗 -->
              <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
                <!-- 上传和修改2 -->
                <el-form :disabled="isDisable == '1' ? true : false" :model="formList" label-width="120px">
                  <el-form-item style="display: none">
                    <el-input v-model="formList.id"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="文件名称：">
                        <el-input v-model="formList.fileName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="时间：">
                        <el-input v-model="formList.time"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="文件类型：">
                        <el-select clearable style="width: 100%;" v-model="formList.type" placeholder="请选择">
                          <el-option label="JPG" value="1"></el-option>
                          <el-option label="PNG" value="2"></el-option>
                          <el-option label="XML" value="3"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="文件属性：">
                        <el-select clearable style="width: 100%;" v-model="formList.sx" placeholder="请选择">
                          <el-option label="图片" value="pic"></el-option>
                          <el-option label="文件" value="file"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="级别：">
                        <el-select clearable style="width: 100%;" v-model="formList.jb" placeholder="请选择">
                          <el-option label="一级" value="1"></el-option>
                          <el-option label="二级" value="2"></el-option>
                          <el-option label="三级" value="3"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="关联文件：">
                        <el-upload
                          style="width:100%;height:150px;padding: 20px 0;box-sizing: border-box; text-align: center; border: 1px solid #333;"
                          :on-change="handleGlFileUp" class="upload-demo" :auto-upload="false" action="#"
                          :file-list="formList.glFile">
                          <!-- <i style="text-align: center;" class="el-icon-upload"></i> -->
                          <div slot="trigger" class="el-upload__text">
                            <img src="@/assets/upIcon.png" alt="">
                            <div style="color:#c2c0c0" slot="tip">只能上传json/xml文件</div>
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="描述：">
                        <textarea :disabled="isDisable == '1' ? true : false" style="width: 100%; height: 100px"
                          v-model="formList.dec"></textarea>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="文件上传：">
                        <el-upload
                          style="width:100%;height:150px;padding: 20px 0;box-sizing: border-box; text-align: center; border: 1px solid #333;"
                          :on-change="handleFileUp" class="upload-demo" :auto-upload="false" action="#"
                          :file-list="formList.file">
                          <!-- <i style="text-align: center;" class="el-icon-upload"></i> -->
                          <div slot="trigger" class="el-upload__text">
                            <img src="@/assets/upIcon.png" alt="">
                            <div style="color:#c2c0c0" slot="tip">只能上传json/xml文件</div>
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="拍摄上传：">
                        <div @click="clickPic"
                          style="cursor: pointer; width:100%;height:150px;padding: 20px 0;box-sizing: border-box; text-align: center; border: 1px solid #333;">
                          <!-- <i style="text-align: center;" class="el-icon-upload"></i> -->
                          <div class="el-upload__text">
                            <img src="@/assets/picUp.png" alt="">
                            <div style="color:#c2c0c0" slot="tip">只能上传jpg/png文件</div>
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <!-- 查看详情1 -->
                <div v-if="isDisable == '2'" slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button style="
                width: 160px;
                height: 40px;
                background: #4271c4;
                color: #fff;
              " @click="handleSubmit(1)">保存</el-button>
                  <el-button style="
                width: 160px;
                height: 40px;
                background: #ffffff;
                color: #4171c4;
                border: 1px solid #4171c4;
              " @click="handleSubmit(2)">取消</el-button>
                </div>
                <div v-else slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button style="
                width: 160px;
                height: 40px;
                background: #4271c4;
                color: #fff;
              " @click="dialogVisible = false">返回</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="margin-top: 5px; float: right;background: #fff;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
          :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      // 表单检索字段
      form: {
        lxId: "",//类型id
        jbId: "",//级别id
        inputVal: "",//关键字
      },
      // 表格渲染数据
      allData: [],
      tableData: [],
      filterList: [],//下来筛选后的数据
      currentPage: 1,//当前页码数
      pageSize: 10,//每页显示条数
      total: 0,
      // 弹窗回显数据
      formList: {
        gxId: '',
        gzName: '',
        sj: '',
        bm: '',
        bq: '',
        dec: ''
      },
      multipleSelection: [],
      isDisable: "1",
      dialogTitle: '详情'

    }
  },
  mounted() {
    // 手动获取表格数据
    this.allData = [
      {
        id: 1,
        lxId: 'jpg',
        fileName: "文件1",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 2,
        lxId: 'png',
        fileName: "文件2",
        mblx: "PNG",
        jb: "二级",
        jbId: "erji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 3,
        lxId: 'xml',
        fileName: "文件3",
        mblx: "Xml",
        jb: "三级",
        jbId: "sanji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      }, {
        id: 4,
        lxId: 'jpg',
        fileName: "文件4",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 5,
        lxId: 'jpg',
        fileName: "文件5",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 6,
        lxId: 'jpg',
        fileName: "文件6",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      }, {
        id: 7,
        lxId: 'jpg',
        fileName: "文件7",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
    ]
    this.getCurrentPageData(this.allData, this.pageSize, this.form.lxId, this.form.jbId, this.currentPage)
  },
  computed: {

  },
  watch: {
    pageSize: {
      handler(val) {
        this.getCurrentPageData(this.allData, val, this.form.lxId, this.form.jbId, this.currentPage)
      }
    },
    currentPage: {
      handler(val) {
        this.getCurrentPageData(this.allData, this.pageSize, this.form.lxId, this.form.jbId, val)
      }
    }
  },
  methods: {
    //点击拍摄上传
    clickPic() {
      if (this.isDisable == '2') {
        this.$router.push('/ruleCtImportPicUp')
      }
    },
    // 上传文件后获取文件名
    handleGlFileUp(file) {
      this.formList.glFile = [file]
    },
    handleFileUp(file) {
      console.log(file)
      this.formList.file = [file]
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 关于分页=====================
    // 处理分页序号
    getIndex($index) {
      return (this.currentPage - 1) * this.pageSize + $index + 1
    },
    // 获取当前页的数据
    getCurrentPageData(dataList, pageSize, lxId, jbId, curPage) {
      const start = (curPage - 1) * pageSize
      const end = start + pageSize

      // 筛选后的数据
      const filterList = dataList.filter((item) => {
        // 如果选中类型  则筛选
        // 如果选中级别 则筛选
        // 如果都选中 则筛选
        if ((item.lxId == lxId) && !jbId) {
          return item
        } else if ((item.jbId == jbId) && !lxId) {
          return item
        } else if ((item.lxId == lxId) && (item.jbId == jbId)) {
          return item
        } else if (!lxId && !jbId) {
          return item
        }
      })

      this.filterList = filterList
      this.total = this.filterList.length
      this.tableData = this.filterList.slice(start, end)
      return filterList.slice(start, end)
    },
    // 每页显示条数改变事件
    handleSizeChange(size) {
      this.pageSize = size
    },
    // 当前页码数改变事件
    handleCurrentChange(curPage) {
      console.log(curPage)//当前页码数
      this.currentPage = curPage
    },
    // 关于检索=========================
    selectChange(id) {
      this.getCurrentPageData(this.allData, this.pageSize, id, this.form.jbId, this.currentPage)
      this.form.inputVal = ''
    },
    selectChange2(id) {
      this.getCurrentPageData(this.allData, this.pageSize, this.form.lxId, id, this.currentPage)
      this.form.inputVal = ''
    },
    // 点击检索
    onSubmit() {
      this.pageSize = 5
      this.currentPage = 1
      // 这里我是要根据类型，名字，所属实现模糊查询，需要什么就在filter里的if中加
      // 这里要用 toLowerCase()  把你输入的全部换成小写，可以更好的模糊查询
      let newList = []
      let _search = this.form.inputVal.toLowerCase()
      if (_search) {
        this.filterList.filter((item) => {
          if (
            item.fileName.toLowerCase().indexOf(_search) !== -1 ||
            item.time.toLowerCase().indexOf(_search) !== -1
          ) {
            newList.push(item)
          }
        })
        this.getCurrentPageData(newList, this.pageSize, this.form.lxId, this.form.jbId, this.currentPage)
      } else {
        this.getCurrentPageData(this.allData, this.pageSize, this.form.lxId, this.form.jbId, this.currentPage)
      }

    },
    // 关于弹窗================================
    // 关于表格操作事件
    handleClick(data, num) {
      this.dialogVisible = true
      switch (num) {
        case "1":
          // 详情
          this.dialogTitle = "详情"
          this.isDisable = "1"
          this.formList = data
          break
        case "2":
          // 修改
          this.isDisable = "2"
          this.dialogTitle = "修改"
          this.formList = data
          this.tableData.map((i) => {
            if (i.id == data.id) {
              i = this.formList
            }
          })
          break
        case "3":
          // 删除
          this.dialogVisible = false
          this.$alert("确认删除文件名为" + data.fileName + "这条数据吗？", {
            confirmButtonText: "确定",
            callback: (action) => {
              if (action == 'cancel') {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              } else {
                this.tableData.map((i, index) => {
                  if (i.id == data.id) {
                    this.allData.splice(index, 1)
                  }
                })
                this.getCurrentPageData(
                  this.allData,
                  this.pageSize,
                  this.form.lxId, this.form.jbId, this.currentPage
                )
                this.$message({
                  type: "success",
                  message: "删除成功！",
                })
              }

            },
          })
          break
        case "4":
          // 详情
          this.dialogTitle = "新增"
          this.isDisable = "2"
          // this.formList = data
          break
        default:
          break
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    //关于弹窗
    handleSubmit(num) {
      switch (num) {
        case 1:
          // 保存
          // 上传
          if (this.dialogTitle == '上传') {
            this.formList.id = Math.random(10, 100)
            this.filterList.unshift(this.formList)
            console.log(this.filterList);
            this.getCurrentPageData(this.filterList, this.pageSize, this.form.lxId, this.form.jbId, this.currentPage)
          }
          this.$message({
            type: "success",
            message: this.dialogTitle + "成功！",
          })
          this.dialogVisible = false
          break
        case 2:
          // 取消
          this.formList = {
            id: '',
            fileName: "",
            file: [

            ],
            type: "",
            jb: "",
            sx: "",
            glFile: [

            ],
            time: "",
            dec: "",
          }
          this.$message({
            type: "warning",
            message: "您已取消" + this.dialogTitle + "！",
          })
          this.dialogVisible = false
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
.ruleSketch {
  .title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #fff;
    border-bottom: 2px solid #707070;

    ul {
      width: 10%;
      height: 99.9%;
      display: flex;
      justify-content: space-around;

      li {
        cursor: pointer;
        padding: 0 10px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
      }

      .act {
        color: #05acb5;
        border-bottom: 2px solid #05acb5;
      }
    }
  }

  .content {
    padding: 10px;
    box-sizing: border-box;

    .con {
      width: 100%;
      background: #fff;
      padding: 20px 15px 40px;
      box-sizing: border-box;
    }
  }
}
</style>